import React, { useEffect, useState, useRef } from 'react'
import { Tabs, Rate } from 'antd-mobile'
import { TabsWrapper, EvaluateContentWrapper } from  './style'
import { useThrottleFn } from 'ahooks'
import { Link } from 'react-router-dom'
// import head from '../../assets/images/head.jpg'
import classnames from 'classnames'

const tabHeight = 78

export default (props) => {
  const { content, contestList, evaluate } = props
  const noderef = useRef()
  const [activeKey, setActiveKey] = useState('1')
  const [appear, setAppear] = useState('0')
  // console.log(content, evaluate, '啦啦啦')
  useEffect(() => {
    // console.log('输出几次？', evaluate)
    // if (evaluate.length && !content[1].length) { // 防止多次插入评论
    //   let newdata = evaluate.reverse().slice(0, 3)
    //   content.splice(1,0,newdata)   
    // }
    // if (content[1].length) {
    //   let newdata = evaluate.reverse().slice(0, 3)
    //   content.splice(1,1,newdata)
    // }
  }, [evaluate])
  const { run: handleScroll } = useThrottleFn(
    () => {
      let currentKey = content[0].key
      let isappear = 0
      const node = noderef?.current?.getBoundingClientRect()
      if (!node) return;
      isappear = node.top <= 124 ? 1 : 0
      if (appear !== isappear) setAppear(isappear)
      for (const item of content) {
        const element = item.length ? 
          document.getElementById('anchor-pl')
          :document.getElementById(`anchor-${item.key}`)
        if (!element) continue
        const rect = element?.getBoundingClientRect()
        // console.log(rect.top,'++++++++++++')
        if (rect.top <= tabHeight) {
          currentKey = item.length ? 'pl' :item.key
        } else {
          break
        }
      }
      setActiveKey(currentKey)
    },
    {
      leading: true,
      trailing: true,
      wait: 100,
    }
  )

  useEffect(() => {
    window.scrollTo(0, 0) // 组件挂载回到头部
    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  return (
    <TabsWrapper appear={appear}>
        <div className="tabsContainer">
          <Tabs
            className='tabs'
            activeKey={activeKey}
            onChange={key => {
              document.getElementById(`anchor-${key}`)?.scrollIntoView()
              window.scrollTo({
                top: window.scrollY - tabHeight + 3,
              })
            }}
          >
            {/* {content.map(item => (
              item.length ? <Tabs.Tab title='评论' key='pl' 
              className={classnames({activefont: activeKey == 'pl'})}/> :
              <Tabs.Tab title={item.title} key={item.key} 
              className={classnames({activefont: activeKey == item.key})} />
            ))} */}
          </Tabs>
        </div>
        <div className="content" ref={noderef}>
          {/* {content.map(item => (
            item.length ? 
            <div key='pl'>
              <div className='content-text'>
                <h2 style={{fontSize:"16px",fontWeight:"900",color:"black"}} id='anchor-pl'>评论</h2>
                <Link to='./evaluate'>
                  <input type="button" value='写评价' className='content-btn' />
                </Link>
                {
                  item.map(i => (
                    <EvaluateContentWrapper key={i.onlyId} star={i.star}>
                      <div className="evaluate-head">
                        <div className="evaluate-photo">
                          <img src={head} alt="" />
                        </div>
                        <div className="evaluate-message">
                          <p>离文不问</p>
                          <p>{i.date}</p>
                        </div>
                      </div>
                      <span>打分</span>
                      <Rate 
                        readOnly
                        allowHalf
                        defaultValue={i.star} 
                        className='rate-star'
                      />
                      <div className="evaluate-body">
                        {i.text}
                      </div>
                    </EvaluateContentWrapper>
                  ))
                }
                <Link to='./allevaluation' style={{"textDecoration": "none"}}>
                  <p style={{textAlign: 'center',color:'gray'}}>{`查看全部  >`}</p>
                </Link>
              </div>
              <div className='separate'></div>
            </div>:
            <div key={item.key}>
              <div className='content-text'>
                <h2 style={{fontSize:"16px",fontWeight:"900",color:"black"}} id={`anchor-${item.key}`}>{item.title}</h2>
                {item.text1 && item.text1.split('@').map((i, index) => (
                  <p key={i+index}>{i}</p>
                ))}
                <img src={item.img1} alt="" />
                {item.text2 && item.text2.split('@').map((i, index) => (
                  <p key={i+index}>{i}</p>
                ))}
                <img src={item.img2} alt="" />
                {item.text3 && item.text3.split('@').map((i, index) => (
                  <p key={i+index}>{i}</p>
                ))}
              </div>
              <div className='separate'></div>
            </div>
          ))} */}
        </div>
    </TabsWrapper>
  )
}